<template>
    <el-dialog :close-on-click-modal="false"  @opened="handleOpen" :modelValue="dialogVisible" @update:modelValue="(e)=>{emit('update:dialogVisible',e)}"   title="Shipping address">
        <el-form :model="formParams">
            <el-form-item label="menuName" :label-width="formLabelWidth">
                <el-input v-model="formParams.menuName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="displayName" :label-width="formLabelWidth">
                <el-input v-model="formParams.displayName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="menuTag" :label-width="formLabelWidth">
                <el-input v-model="formParams.menuTag" autocomplete="off" />
            </el-form-item>
            <el-form-item label="url" :label-width="formLabelWidth">
                <el-input v-model="formParams.url" autocomplete="off" />
            </el-form-item>
            <el-form-item label="permissionName" :label-width="formLabelWidth">
                <el-input v-model="formParams.permissionName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="icon" :label-width="formLabelWidth">
                <el-input v-model="formParams.icon" autocomplete="off" />
            </el-form-item>
            <el-form-item label="menuType" :label-width="formLabelWidth">
                <el-select v-model="formParams.menuType" class="m-2" placeholder="Select" size="large">
                    <el-option
                        v-for="item in menuTypes"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="isDisabled" :label-width="formLabelWidth">
                <el-switch v-model="formParams.isDisabled" />
            </el-form-item>
            <el-form-item label="order" :label-width="formLabelWidth">
                <el-input v-model.number="formParams.order" autocomplete="off" />
            </el-form-item>
            <el-form-item label="parentId" :label-width="formLabelWidth">
                <el-tree-select
                    node-key="id"
                    :props="{
                        'label':'displayName'
                    }"
                    v-model="formParams.parentId"
                    :data="routeDatas"
                    check-strictly
                    :render-after-expand="false"
                />

            </el-form-item>
            <el-form-item label="tenantId" :label-width="formLabelWidth">
                <el-input v-model="formParams.tenantId" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="emit('update:dialogVisible',false)">Cancel</el-button>
                <el-button type="primary" @click="sureClick">
                    Confirm
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
import {apiMenuCreate,apiMenuUpdate} from "@/api/menu"
import {omit} from "lodash-es"
defineOptions({
  name: "MenuDialog",
});
const props = defineProps({
  dialogVisible: {
    type:Boolean,
    default:false
  },
  routeDatas:{
    type:Array,
    default:function() {
      return []
    }
  },
  type:{
    type:String,
    default:'add'
  },
  editObject:{
    type:Object,
    default:function() {
      return null
    }
  }
})
const emit = defineEmits(['update:dialogVisible','hanldeRequest']);
const formLabelWidth = '140px'
const menuTypes = ref([{name:'文件夹',value:1},{name:'页面',value:2},{name:'按钮',value:3}])
const formParams = ref({
  menuName:'',
  displayName:'',
  menuTag:'',
  url:'',
  permissionName:'',
  icon:'',
  isDisabled:true,
  order:'',
  parentId:'',
  tenantId:'',
  menuType:''
})

function handleOpen() {
  formParams.value = {
    menuName:'',
    displayName:'',
    menuTag:'',
    url:'',
    permissionName:'',
    icon:'',
    isDisabled:true,
    order:'',
    parentId:'',
    tenantId:'',
    menuType:''
  }
  if(props.type === 'add') {
    formParams.value = {
      menuName:'',
      displayName:'',
      menuTag:'',
      url:'',
      permissionName:'',
      icon:'',
      isDisabled:true,
      order:'',
      parentId:'',
      tenantId:'',
      menuType:''
    }
  }else if(props.type === 'edit') {
    formParams.value = Object.assign(formParams.value,props.editObject)
  }

}
async function sureClick() {
  if(props.type === 'add') {
    if(!formParams.value.parentId) {
      await apiMenuCreate(omit(formParams.value,['parentId','tenantId']))
    }else{
      await apiMenuCreate(omit(formParams.value,['tenantId']))
    }
  }else if(props.type === 'edit') {
    await apiMenuUpdate(omit(formParams.value,['tenantId']))
  }

  emit('update:dialogVisible',false)
  emit('hanldeRequest')
}


</script>

<style lang="scss" scoped>

</style>